<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.one{
	font-size: 20px;
    margin-left:20px;
    float:left;}
/*框*/	
.thot{border:#000;
     background-color:#fff;
	 width:90px;
	 height:90px;
	 margin-top:50px;
	 border-top:3px solid #000;
	 border-bottom: 3px solid #000;
	border-left: 3px solid #000;
    border-right:3px solid #000;
     margin:10px 0 0 40px;
}
	
.tow{
	line-height:20px;
    background-color:#f00;
    margin-top: 18px;
 }	
.mask{
	background-color: #000;
	opacity: 0.3;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 100;
	 display: none;
   }
.pop{
	background-color:#fff; 
	width: 330px;
	height: 280px;
	position:fixed;
	z-index: 101;
	bottom: 0;
	right:0;
    display: none;
    border: 15px solid gray;
    margin: 50px 50px;
    padding: 20px;

}
 .close-btn{
 	  font-size: 13px;
	  color: #fff;
 	  float: right;
      width:50px;
      height:30px;
      display:inline-block;
      margin-right:110px;
      background:  #050d4a;
}   

 .text{
 	font-size: 13px;
	color: #fff;
	float:left;
    width:50px;
    height:30px;
    display:inline-block;
	margin-left:110px;
	text-align: center; 
	background:  #050d4a; 
}   

  .font{
  	color: #fff;
	background-color:#42ff00d6;
    display:inline-block; 
    width:40px;
    height:40px;
}
.font:hover{
  	color: #fff;
	background-color:red;
    display:inline-block; 
    width:40px;
    height:40px;
}
.sub{
	color: #fff;
     background-color:#ffa31fd6;
     display:inline-block;
     width:40px;
     height:40px;
   }
.sub:hover{
	color: #fff;
     background-color:#ff0;
     display:inline-block;
     width:40px;
     height:40px;
   }
   .ad{
	color: #fff;
	background-color:#444bf1;
    width:40px;
    height:40px;
  }
.ad:hover{
	color: #fff;
	background-color:#00f;
    width:40px;
    height:40px;
  }
  .ww{width:40px;
     height:40px;
     margin-left: 5px;
 }
</style>

</head>
<body>
<div>
<p class="one">
<p class="one"><b>请为div设置样式：</b></p>
<button class="tow" id="login">点击设置</button> 
<div class="thot" id="okl"></div>
</div>
<div class="mask" id="mask"></div>
<div class="pop" id="pop">

 <P>请选择颜色：
 <button class="font" id="redBtn">红</button>
 <button class="sub" id="huangBtn">黄</button>
 <button class="ad" id="blueBtn">蓝</button></P>
 
 <p>请选择宽（px）：<button class="ww" id="box">200</button>
 <button class="ww" id="boo">300</button>
 <button class="ww" id="bob">400</button></p>
 
 <p>请选择高（px）：<button class="ww" id="eh">200</button>
 <button class="ww" id="work">300</button>
 <button class="ww" id="wor">400</button></p>
 <p>
<button class="text" id="eg">恢复</button>
</p>
<p>
<button class="close-btn" id="CloseBtn">确定</button>
</p>
</div>

	<script>
var oLogin=document.getElementById("login");


var oMask=document.getElementById("mask");

var oPop=document.getElementById("pop");


var oCloseBtn=document.getElementById("CloseBtn");

var oRedBtn=document.getElementById("redBtn");
var huangBtn=document.getElementById("huangBtn");
var blueBtn=document.getElementById("blueBtn");


var oBox=document.getElementById("box");
var oBoo=document.getElementById("boo");
var oBob=document.getElementById("bob");



var oEh=document.getElementById("eh");
var oWork=document.getElementById("work");
var oWor=document.getElementById("wor");


var oEg=document.getElementById("eg");
//console.log(oRedBtn);
var oOkl=document.getElementById("okl");

function displaypop(){
	
	oPop.style.display="block";

oMask.style.display="block";

}
oLogin.onclick=displaypop;


function hiddenPop(){
	
	oPop.style.display="none";

oMask.style.display="none";}
oCloseBtn.onclick=hiddenPop;

function setColor(){

oOkl.style.background="red";
}
oRedBtn.onclick=setColor;
function setting(){
oOkl.style.background="yellow";
}
huangBtn.onclick=setting;
function dfr(){
oOkl.style.background="blue";
}
blueBtn.onclick=dfr;



function setwi(){
oOkl.style.width="200px";
}
box.onclick=setwi;
function setwl(){
oOkl.style.width="300px";
}
boo.onclick=setwl;
function setol(){
oOkl.style.width="400px";
}
bob.onclick=setol;

function sethuo(){
oOkl.style.height="200px";
}
eh.onclick=sethuo;
function setyun(){
oOkl.style.height="300px";
}
work.onclick=setyun;

function setert(){
oOkl.style.height="400px";
}
wor.onclick=setert;

function refu(){
oOkl.style.width="100px";
oOkl.style.height="100px";
oOkl.style.background="white";
}
eg.onclick=refu;
</script>
</body>
</html>